<!--
  Generated template for the FormComponentPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<form [formGroup]="accountForm" (ngSubmit)="_submitForm()" *ngIf="_account">

  <ion-list>

    <ng-container *ngFor="let item of _account">
      <ion-item *ngIf="item.type === 'ion-input'">
        <ion-label floating>
          {{item.label}}
          <span
            *ngIf="accountForm.controls[item.key].invalid && (accountForm.controls[item.key].dirty || accountForm.controls[item.key].touched)"
            class="alert-danger">
            <span *ngIf="accountForm.controls[item.key].errors.required">
              不可为空
            </span>
            <span *ngIf="accountForm.controls[item.key].errors.maxlength">
              最大长度为{{accountForm.controls[item.key].errors.maxlength.requiredLength}}
            </span>
            <span *ngIf="accountForm.controls[item.key].errors.minlength">
              最小长度为{{accountForm.controls[item.key].errors.minlength.requiredLength}}
            </span>
          </span>
        </ion-label>
        <ion-input formControlName="{{item.key}}"
                   type="{{item.inputType}}"></ion-input>

      </ion-item>
      <ion-item *ngIf="item.type === 'map'">

        <ion-label floating>
          {{item.label}}
          <span
            *ngIf="accountForm.controls[item.key].invalid && (accountForm.controls[item.key].dirty || accountForm.controls[item.key].touched)"
            class="alert-danger">
            <span *ngIf="accountForm.controls[item.key].errors.required">
              不可为空
            </span>
            <span *ngIf="accountForm.controls[item.key].errors.maxlength">
              最大长度为{{accountForm.controls[item.key].errors.maxlength.requiredLength}}
            </span>
            <span *ngIf="accountForm.controls[item.key].errors.minlength">
              最小长度为{{accountForm.controls[item.key].errors.minlength.requiredLength}}
            </span>
          </span>
        </ion-label>
        <ion-input formControlName="{{item.key}}"
                   type="{{item.inputType}}"></ion-input>

      </ion-item>
      <ion-item *ngIf="item.type === 'ion-select'">
        <ion-label>
          {{item.label}}
        </ion-label>
        <ion-select formControlName="{{item.key}}" cancelText="取消" okText="确定">
          <ion-option *ngFor="let option of item.options" value="{{option.val}}">{{option.key}}</ion-option>
        </ion-select>
      </ion-item>
    </ng-container>
  </ion-list>
  <button ion-button full round type="submit" class="btn btn-default"
          [disabled]="accountForm.invalid">提交
  </button>
</form>
<!--<button ion-button full round (click)="showAll()">测试-->
<!--</button>-->
